 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width2">商户充值排行</div>
      </div>
      <div class="content-con">
        <div class="bank-search">
          <Form class="search-item" :model="form">
            <FormItem class="item-padding">
              <Date-picker v-model="form.starttime" size="large" style="width: 100%" type="datetime" placeholder="起始时间"></Date-picker>
            </FormItem>
            <FormItem class="item-padding">
              <Date-picker v-model="form.starttime" size="large" style="width: 100%" type="datetime" placeholder="结束时间"></Date-picker>
            </FormItem>
            <FormItem>
              <i-button size="large" class="btn-green">搜索</i-button>
            </FormItem>
          </Form>
        </div>
        <div class="capital-money">
          <div class="capital-money-item">
            充值总金额：<span class="list1">101400</span>
            入账总金额：<span class="list2">¥100660.3</span>
            充值总手续费：<span class="list2">¥739.7</span>
            充值总笔数：<span class="list1">8</span>
            线下充值总金额：<span class="list2"></span>
            线下充值总手续费：<span class="list2"></span>
            线下充值总笔数：<span class="list2"></span>
            代付总额：<span class="list2">154</span>
            代付总笔数：<span class="list2">5</span>
            代付总手续费：<span class="list1">¥8.08</span>
            总余额：<span class="list3">¥164224.84</span>
          </div>
        </div>
        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="foodColumns" :data="foodData"></i-table> <!-- table组件 -->
          </div>
          <div class="page">
            <Page :id="pageId"
             :total="dataCount"
             :page-size="pageSize"
             style="float: left;"
             @on-change="changepage"
             @on-page-size-change="nowPageSize"
             show-total show-sizer show-elevator></Page> <!-- page组件 -->
            <Button style="float: left;margin-left: 10px;" type="primary" @click="goElevatorPage">确认</Button>
          </div>
        </div>
      </div>
   </Card>

 </template>
<script>

let testData = {
  histories: [
    {
      merchantId: '20000033',
      merchantName: 'ceshi',
      rechargeAmount: '100100',
      enterAmount: '99399.3',
      fee: '700.7',
      rechargeCount: '2',
      offRechargeAmount: '0',
      offFee: '0',
      offRechargeCount: '0',
      paidTotal: '0',
      paidCount: '0',
      paidFee: '0',
      totalBalance: '99399.3'
    },
    {
      merchantId: '20000032',
      merchantName: '测试',
      rechargeAmount: '1300',
      enterAmount: '1261',
      fee: '39',
      rechargeCount: '4',
      offRechargeAmount: '0',
      offFee: '0',
      offRechargeCount: '0',
      paidTotal: '154',
      paidCount: '5',
      paidFee: '8.08',
      totalBalance: '1098.92'
    },
    {
      merchantId: '20000031',
      merchantName: 'ceshi1',
      rechargeAmount: '100100',
      enterAmount: '99399.3',
      fee: '700.7',
      rechargeCount: '2',
      offRechargeAmount: '0',
      offFee: '0',
      offRechargeCount: '0',
      paidTotal: '0',
      paidCount: '0',
      paidFee: '0',
      totalBalance: '99399.3'
    }
  ]
}
export default {
  name: 'merchant_recharge_ranking',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      form: {
        starttime: '',
        timeData: ''
      },
      value: '',
      pageId: 'targetpage',
      ajaxHistoryData: [],
      exportdata: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页
      foodColumns: [
        {
          title: '商户ID',
          key: 'merchantId'
        },
        {
          title: '商户名称',
          key: 'merchantName'
        },
        {
          title: '充值金额',
          key: 'rechargeAmount'
        },
        {
          title: '入账金额',
          key: 'enterAmount'
        },
        {
          title: '充值手续费',
          key: 'fee'
        },
        {
          title: '充值笔数',
          key: 'rechargeCount'
        },
        {
          title: '线下充值金额',
          key: 'offRechargeAmount'
        },
        {
          title: '线下充值手续费',
          key: 'offFee'
        },
        {
          title: '线下充值笔数',
          key: 'offRechargeCount'
        },
        {
          title: '代付总额',
          key: 'paidTotal'
        },
        {
          title: '代付笔数',
          key: 'paidCount'
        },
        {
          title: '代付手续费',
          key: 'paidFee'
        },
        {
          title: '总余额',
          key: 'totalBalance'
        }
      ],
      foodData: []
    }
  },
  methods: {
    // 获取历史记录信息
    handleListApproveHistory () {
      // 保存取到的所有数据
      this.ajaxHistoryData = testData.histories
      this.exportdata = testData.histories
      this.dataCount = testData.histories.length
      // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
      if (testData.histories.length < this.pageSize) {
        this.foodData = this.ajaxHistoryData
      } else {
        this.foodData = this.ajaxHistoryData.slice(0, this.pageSize)
      }
    },
    // 点击切换页面
    changepage (index) {
      // 需要显示开始数据的index,(因为数据是从0开始的，页码是从1开始的，需要-1)
      let _start = (index - 1) * this.pageSize
      // 需要显示结束数据的index
      let _end = index * this.pageSize
      // 截取需要显示的数据
      this.foodData = this.ajaxHistoryData.slice(_start, _end)
      // 储存当前页
      this.pageCurrent = index
    },
    // 每页显示的数据条数
    nowPageSize (index) {
      let _start = (this.pageCurrent - 1) * index
      let _end = this.pageCurrent * index
      this.foodData = this.ajaxHistoryData.slice(_start, _end)
      // 实时获取当前需要显示的条数
      this.pageSize = index
    },

    // 点击确认，跳转到输入的页码
    goElevatorPage () {
      var evtObj
      var thisPage = document.getElementById(this.pageId)
      // var thisPage=this.$refs.myPage;//也可以用ref来获取page这个dom
      var elevatorDiv = thisPage.getElementsByClassName('ivu-page-options-elevator')
      // 如果thisPage这里报错了,请核对上文的获取page的DOM的语句是否获取不到
      if (elevatorDiv && elevatorDiv.length > 0) {
        var pageInput = elevatorDiv[0].getElementsByTagName('input')[0]
        if (window.KeyEvent) { // firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents')
          evtObj.initKeyEvent('keyup', true, true, window, true, false, false, false, 13, 0)
        } else { // chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents')
          evtObj.initUIEvent('keyup', true, true, window, 1)
          delete evtObj.keyCode
          if (typeof evtObj.keyCode === 'undefined') { // 为了模拟keycode
            Object.defineProperty(evtObj, 'keyCode', { value: 13 })
          } else {
            evtObj.key = String.fromCharCode(13)
          }
        }
        pageInput.dispatchEvent(evtObj)
      }
    }
  },
  created () {
    this.handleListApproveHistory()
  }
}
</script>
 <style lang="less">
 </style>
